<template>
  <div class="demo-drawer__content">
    <el-form
      ref="componentFrom"
      :model="form"
      :rules="rules"
      label-width="70px"
      :disabled="isDisabled"
    >
      <el-form-item label="节点名称">
        <common-input v-model="form.name" placeholder="请输入"></common-input>
      </el-form-item>
      <el-form-item label="数据源">
        <el-select
          v-model="form.dataSourceId"
          placeholder="请选择"
          :popper-append-to-body="false"
          @change="handleChoose"
          filterable
          clearable
        >
          <el-option
            v-for="(item, index) in newSourceList"
            :key="item.id"
            :value="item.id"
            :label="item.datasoureName"
            :disabled="item.status !== 0"
          >
            <div style="float: left; width: calc(100% - 30px)">
              <span class="selectList">
                <common-marquee-text
                  :content="item.datasoureName"
                  fontSize="14px"
                >
                </common-marquee-text>
              </span>
            </div>
            <span
              v-if="item.status === 0"
              style="float: right; color: #67c23a; font-size: 13px"
              >有效</span
            >
            <span v-else style="float: right; color: #f56c6c; font-size: 13px"
              >无效</span
            >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        :label="'统计字段'"
        v-for="(item, index) in form.statisticsList"
        :key="item.index"
        prop="field"
      >
        <common-select
          ref="esStatisticsFieldListSelect"
          class="esStatisticsFieldListSelect"
          :initData="esStatisticsFieldListForOther"
          v-model="item.field"
          clearable
          @loadMore="statisticsLoadMore"
          @blurClear="statisticsBlurClear"
          @remoteSearch="statisticsRemoteSearch"
          @change="statisticsChange"
          @openVisible="statisticsFocus"
          @closeVisible="statisticsCloseVisible"
        ></common-select>

        <!--        <el-select-->
        <!--          v-model="item.field"-->
        <!--          filterable-->
        <!--          clearable-->
        <!--          @change="handleChooseStatistics">-->
        <!--          <el-option-->
        <!--            v-for="(item, index) in esStatisticsFieldListForOther"-->
        <!--            :label="item.label"-->
        <!--            :value="item.value"-->
        <!--            :key="item.key"-->
        <!--          ></el-option>-->
        <!--        </el-select>-->
      </el-form-item>

      <el-form-item
        :label="'时间字段'"
        v-for="(item, index) in form.dateFieldsList"
        :key="item.index"
        :prop="'dateFieldsList.' + index + '.field'"
        :rules="rules.dateField"
      >
        <div class="form-item-flex">
          <el-select v-model="item.field" filterable clearable>
            <el-option
              v-for="(item, index) in esStatisticsFieldListForDate"
              :label="item.label"
              :value="item.value"
              :key="item.key"
            ></el-option>
          </el-select>
          <el-select v-model="item.dateIntervals" filterable clearable>
            <el-option
              v-for="(item, index) in dateIntervalList"
              :label="item.label"
              :value="item.value"
              :key="item.key"
            ></el-option>
          </el-select>
        </div>
      </el-form-item>

      <el-form-item
        :label="'指标字段'"
        v-for="(item, index) in form.targetFieldList"
        :key="item.index"
        :prop="'targetFieldList.' + index + '.aggType'"
        :rules="rules.targetField"
      >
        <div class="form-item-flex">
          <el-select
            v-model="item.aggType"
            :style="{
              width:
                item.aggType === 'count' || item.aggType === ''
                  ? '100%'
                  : '49%',
            }"
            filterable
            @change="handleTargetField"
          >
            <el-option
              v-for="item in aggregationList"
              :key="item.key"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>

          <el-select
            v-model="item.field"
            v-if="item.aggType !== 'count' && item.aggType !== ''"
            filterable
            clearable
          >
            <el-option
              v-for="item in esIsShowFieldList"
              :key="item.key"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="查询条数">
        <el-select
          v-model="form.limitSize"
          placeholder="请选择"
          filterable
          :popper-append-to-body="false"
        >
          <el-option
            v-for="(item, index) in limitList"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        :label="'条件' + (index + 1)"
        v-for="(item, index) in form.chd"
        :key="item.index"
        :prop="'chd.' + index + '.fieldName'"
        :rules="rules.condition"
      >
        <div class="esField">
          <common-select
            :class="`chdSelect${index}`"
            style="margin-right: 8px"
            :initData="initChdFields[index]"
            v-model="item.fieldName"
            :key="index"
            clearable
            @openVisible="chdFocus(index)"
            @blurClear="chdBlur"
            @loadMore="cndLoadMore"
            @remoteSearch="chdRemoteSearch"
            @change="cndChange"
            @closeVisible="cndCloseVisible"
          ></common-select>

          <!--          <el-select-->
          <!--            v-model="item.fieldName"-->
          <!--            placeholder="字段名称"-->
          <!--            style="margin-right: 8px"-->
          <!--            clearable-->
          <!--            filterable-->
          <!--            @change="handleChange(item.fieldName,index)"-->
          <!--          >-->
          <!--            <el-option-->
          <!--              v-for="(item, index) in esIsSearchFieldList"-->
          <!--              :label="item.label"-->
          <!--              :value="item.value"-->
          <!--              :key="index"-->
          <!--            ></el-option>-->
          <!--          </el-select>-->

          <el-select
            placeholder="操作符号"
            v-model="item.operator"
            style="margin-right: 8px"
            clearable
            filterable
          >
            <el-option
              v-for="(item, index) in sqlExpressionList"
              :label="item.label"
              :value="item.value"
              :key="index"
            ></el-option>
          </el-select>

          <el-select
            placeholder="值类型"
            v-model="item.chdType"
            style="margin-right: 8px"
            clearable
            filterable
          >
            <el-option label="自定义" value="define">自定义</el-option>
            <el-option label="变量" value="variable">变量</el-option>
          </el-select>

          <common-input
            v-if="item.chdType === 'define'"
            placeholder="字段值"
            v-model="item.value"
            style="margin-right: 8px"
            clearable
            :verify="false"
          ></common-input>

          <el-select
            v-else
            placeholder="变量名称"
            v-model="item.value"
            style="margin-right: 8px"
            clearable
            filterable
          >
            <el-option
              v-for="(item, index) in variable"
              :label="item.label"
              :value="item.label"
              :key="index"
            ></el-option>
          </el-select>

          <el-button
            type="danger"
            plain
            @click="delCondition(index)"
            style="position: absolute; right: 0; top: 0"
            v-if="index > 0"
            >删除
          </el-button>
        </div>
        <el-button
          type="primary"
          plain
          @click="addCondition"
          v-if="index === 0"
          style="position: absolute; right: 0; top: 0"
          >新增
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  getDataSourceList,
  querySourceList,
  subgroup_selectIndexList,
} from "@/api/screenConfig/dataSet";
import { sqlExpressionList } from "@/dictionary/database";
import { initPagination } from "@/utils/util";
import { _deepClone } from "@/utils";

const numberType = [
  "tinyint",
  "smallint",
  "mediumint",
  "int",
  "integer",
  "bigint",
  "float",
  "double",
  "decimal",
  "number",
  "real",
  "bit",
  "numberic",
  "binary_float",
  "binary_double",
];
const dateType = ["date", "time", "year", "datetime", "timestamp"];

export default {
  name: "ESTableInput",
  props: {
    option: {
      type: Object,
      default: () => {},
    },
    // dataSourceList: {
    //   type: Array,
    //   default: () => []
    // },//数据源列表
    isDisabled: {
      type: Boolean,
      default: () => false,
    }, //是否可编辑
    variable: {
      type: Array,
      default: () => [],
    }, //变量
  },
  data() {
    const checkDateField = (rule, value, callback) => {
      if (
        (value && this.form.dateFieldsList[0].dateIntervals) ||
        (!value && !this.form.dateFieldsList[0].dateIntervals)
      ) {
        callback();
      } else {
        callback(new Error("请填写完整"));
      }
    };
    const checkTargetField = (rule, value, callback) => {
      if (value && value !== "count" && !this.form.targetFieldList[0].field) {
        callback(new Error("请填写完整"));
      } else {
        callback();
      }
    };
    const checkCondition = (rule, value, callback) => {
      let i = parseInt(rule.field.split(".")[1]);

      let fieldName = this.form.chd[i].fieldName,
        operator = this.form.chd[i].operator,
        fieldValue = this.form.chd[i].value;

      if (
        (fieldName && operator && fieldValue) ||
        (!fieldName && !operator && !fieldValue)
      ) {
        callback();
      } else {
        callback(new Error("请填写完整"));
      }
    };
    return {
      indexPrefix: "",
      form: {
        name: null,
        dataSourceId: "",
        limitSize: 10,
        statisticsList: [
          {
            field: "",
            aggType: "terms", //固定参数
            size: 10, //固定参数
            sort: false, //固定参数
            type: "",
          },
        ],
        dateFieldsList: [
          {
            field: "",
            dateIntervals: "",
            aggType: "datehistogram", // 日期固定类型
            size: 10, //固定参数
          },
        ],
        targetFieldList: [
          {
            aggType: "",
            field: "",
            size: 10, //固定参数
          },
        ],
        chd: [
          {
            fieldName: null,
            type: null,
            operator: null,
            value: null,
            chdType: "define",
          },
        ],
      },
      esStatisticsFieldList: [], //统计字段
      esStatisticsFieldListForOther: [],
      esIsShowFieldList: [],
      esIsSearchFieldList: [],
      esStatisticsFieldListForDate: [], //时间字段
      chdList: [], //条件列表
      aggregationList: [
        { label: "计数", value: "count" },
        { label: "平均数", value: "avg" },
        { label: "最大值", value: "max" },
        { label: "最小值 ", value: "min" },
        { label: "合计 ", value: "sum" },
      ], // 指标类型列表
      dateIntervalList: [
        { label: "年", value: "year" },
        { label: "月", value: "month" },
        { label: "天", value: "day" },
        { label: "小时", value: "hour" },
      ],
      sqlExpressionList: sqlExpressionList,
      rules: {
        dateField: [
          { required: true, validator: checkDateField, trigger: "blur" },
        ],
        targetField: [
          { required: true, validator: checkTargetField, trigger: "blur" },
        ],
        condition: [
          { required: true, validator: checkCondition, trigger: "blur" },
        ],
      },
      limitList: [
        { label: "10条", value: 10 },
        { label: "20条", value: 20 },
        { label: "30条", value: 30 },
        { label: "50条", value: 50 },
        { label: "100条", value: 100 },
      ],
      statisticsForm: {
        pageNum: 1,
        pageSize: 10,
        label: "",
      },
      initStatistics: "",
      chdForm: {
        pageNum: 1,
        pageSize: 10,
        label: "",
      },
      chdIndex: 0,
      newSourceList: [],
      initChdFields: [],
      formChdTemp: [],
    };
  },
  watch: {
    option: {
      handler: function (val) {
        this.getDataSourceList(val.dataSourceId);
        this.initData();
      },
      deep: true,
      immediate: true,
    },
    form: {
      handler: function (val, newVal) {
        let esForm = {
          indexPrefix: this.indexPrefix, //this.form.databaseName
          limit: 10,
          limitSize: this.form.limitSize,
          group: [],
          where: {
            chd: [],
            operate: "AND",
          },
        };

        this.form.statisticsList[0].size = this.form.limitSize;
        this.form.dateFieldsList[0].size = this.form.limitSize;
        this.form.targetFieldList[0].size = this.form.limitSize;

        if (
          Object.values(this.form.statisticsList[0]).every(
            (item) => item === false || item
          )
        ) {
          esForm.group.push(this.form.statisticsList[0]);
        }
        if (Object.values(this.form.dateFieldsList[0]).every((item) => item)) {
          esForm.group.push(this.form.dateFieldsList[0]);
        }
        if (
          this.form.targetFieldList[0].aggType !== "count" &&
          Object.values(this.form.targetFieldList[0]).every((item) => item)
        ) {
          esForm.group.push(this.form.targetFieldList[0]);
        }
        if (Object.values(this.form.chd[0]).every((item) => item)) {
          esForm.where.chd = this.form.chd;
        }
        let info = {
            name: this.form.name,
            dataSourceId: this.form.dataSourceId,
            sql: JSON.stringify(esForm),
          },
          complete = Object.values(info).every((item) => !!item);
        // console.log(esForm)
        this.$emit("changeForm", info, complete);
      },
      deep: true,
    },
  },
  computed: {
    //统计字段
    // esStatisticsFieldListForOther() {
    //   if (this.esStatisticsFieldList.length) {
    //     let fieldList = this.esStatisticsFieldList.filter(f => f.type && !dateType.includes(f.type.toLowerCase()))
    //     let filterForm = {
    //       value: this.statisticsForm.label,
    //       key: 'label'
    //     }
    //     let initData = {
    //       value: this.initStatistics,
    //       key: 'value'
    //     }
    //     return initPagination(fieldList, this.statisticsForm.pageNum, this.statisticsForm.pageSize, filterForm, initData)
    //   }
    // },
    // esStatisticsFieldListForDate() {
    //   if (this.esStatisticsFieldList.length) {
    //     let data = this.esStatisticsFieldList.filter(f => f.type && dateType.includes(f.type.toLowerCase()))
    //     console.log(new Date().getTime())
    //     return data
    //   }
    // },
    //条件
    // chdList() {
    //   if (this.esIsSearchFieldList.length) {
    //     let filterForm = {
    //       value: this.chdForm.label,
    //       key: 'label'
    //     }
    //     console.log(filterForm)
    //     let initData = {
    //       value: this.form.chd[this.index]?.label,
    //       key: 'value'
    //     }
    //     return initPagination(this.esIsSearchFieldList, this.chdForm.pageNum, this.chdForm.pageSize, filterForm, initData)
    //   }
    // }
  },
  methods: {
    /**
     * 获取数据源列表信息
     */
    getDataSourceList(id) {
      let params = {
        status: 0,
        datasourceType: "ES",
      };
      if (id) params.id = id;
      querySourceList(params).then((res) => {
        if (res && res.code === 200) {
          this.newSourceList = res.rows.reduce((r, c) => {
            if (c.datasourceType === "ES") {
              r.push(c);
            }
            return r;
          }, []);
        } else {
          this.dataSourceList = [];
        }
      });
    },
    //统计字段下拉框事件 下拉加载
    statisticsLoadMore() {
      this.statisticsForm.pageNum++;
      this.getEsStatisticsFieldListForOther();
    },
    statisticsRemoteSearch(query) {
      this.esStatisticsFieldListForOther = [];
      this.statisticsForm.label = query;
      this.statisticsForm.pageNum = 1;
      this.getEsStatisticsFieldListForOther();
      //修改滚动条位置置于顶部
      this.$nextTick(() => {
        let parentDom = document.getElementsByClassName(
          "esStatisticsFieldListSelect"
        )[0];
        let scrollerDom = parentDom
          .querySelector(".is-vertical")
          .querySelector(".el-scrollbar__thumb");
        parentDom.querySelector(".el-select-dropdown__wrap").scrollTop = 0;
        if (scrollerDom) scrollerDom.style.transform = "translateY(0%)";
      });
    },
    //打开下拉框事件
    statisticsFocus() {
      this.statisticsForm.label = null;
      this.statisticsForm.pageNum = 1;
      this.getEsStatisticsFieldListForOther();
    },
    statisticsChange(item) {
      this.form.statisticsList[0].type = item ? item.type : "";
      // this.statisticsForm.label = null
      // this.statisticsForm.pageNum = 1
      // this.getEsStatisticsFieldListForOther()
    },
    statisticsBlurClear() {
      this.statisticsForm.label = null;
      this.statisticsForm.pageNum = 1;
      this.getEsStatisticsFieldListForOther();
    },
    statisticsCloseVisible() {
      this.esStatisticsFieldListForOther = [];
    },

    //条件字段下拉框事件 下拉加载
    chdFocus(index) {
      // this.initChdFields[index] = this.getEsIsSearchFieldList()
      this.chdIndex = index;
      this.chdForm.label = null;
      this.chdForm.pageNum = 1;
      this.$set(this.initChdFields, index, this.getEsIsSearchFieldList());
      // this.getEsIsSearchFieldList()
    },
    cndLoadMore() {
      this.chdForm.pageNum++;
      // this.getEsIsSearchFieldList()
      this.$set(
        this.initChdFields,
        this.chdIndex,
        this.getEsIsSearchFieldList()
      );
    },
    chdRemoteSearch(query) {
      this.chdList = [];
      this.chdForm.label = query;
      this.chdForm.pageNum = 1;
      // this.getEsIsSearchFieldList()
      this.$set(
        this.initChdFields,
        this.chdIndex,
        this.getEsIsSearchFieldList()
      );
      this.$nextTick(() => {
        let parentDom = document.getElementsByClassName(
          `chdSelect${this.chdIndex}`
        )[0];
        let scrollerDom = parentDom
          .querySelector(".is-vertical")
          .querySelector(".el-scrollbar__thumb");
        parentDom.querySelector(".el-select-dropdown__wrap").scrollTop = 0;
        if (scrollerDom) scrollerDom.style.transform = "translateY(0%)";
      });
    },
    chdBlur() {
      this.chdForm.label = null;
      this.chdForm.pageNum = 1;
      // this.getEsIsSearchFieldList()
      this.$set(
        this.initChdFields,
        this.chdIndex,
        this.getEsIsSearchFieldList()
      );
    },
    cndChange(item) {
      this.form.chd[this.chdIndex].type = item ? item.type : "";
    },
    cndCloseVisible() {
      this.chdList = [];
    },

    //选择数据源
    handleChoose(val) {
      let api = this.newSourceList.find(
        (ds) => ds.id === this.form.dataSourceId
      );
      this.indexPrefix = api ? api.databaseName : "";
      this.getEsFieldList(this.form.dataSourceId);
      this.resetFormData();
    },
    //根据数据源id获取对应表字段
    getEsFieldList(dataSourceId) {
      subgroup_selectIndexList({ dataSourceId }).then((res) => {
        if (res && res.code === 200 && res.data) {
          //所有字段
          this.esStatisticsFieldList = res.data.reduce((r, c) => {
            r.push({
              label: c.columnAlias || c.columnName,
              value: c.columnName,
              key: c.id,
              type: c.columnType,
              isShow: c.isShow,
              isSearch: c.isSearch,
              isStatistics: c.isStatistics,
            });
            return r;
          }, []);
          //1.统计字段
          this.getEsStatisticsFieldListForOther();
          //2.指标字段
          this.getEsIsShowFieldList();
          //3.时间字段
          this.getEsStatisticsFieldListForDate();
          //4.条件字段
          this.form.chd.forEach((item, index) => {
            this.$set(
              this.initChdFields,
              index,
              this.getEsIsSearchFieldList(item.fieldName)
            );
          });
        } else {
          this.esStatisticsFieldList = [];
          this.esIsShowFieldList = [];
          this.esIsSearchFieldList = [];
        }
      });
    },
    //统计字段
    getEsStatisticsFieldListForOther() {
      this.esStatisticsFieldListForOther = [];
      if (this.esStatisticsFieldList.length) {
        let fieldList = this.esStatisticsFieldList.filter(
          (f) =>
            f.isStatistics === 0 &&
            f.type &&
            !dateType.includes(f.type.toLowerCase())
        );
        let filterForm = {
          value: this.statisticsForm.label,
          key: "label",
        };
        let initData = {
          value: this.initStatistics,
          key: "value",
        };
        this.esStatisticsFieldListForOther = initPagination(
          fieldList,
          this.statisticsForm.pageNum,
          this.statisticsForm.pageSize,
          filterForm,
          initData
        );
      }
    },
    //指标字段
    getEsIsShowFieldList() {
      this.esIsShowFieldList = this.esStatisticsFieldList.filter(function (
        item
      ) {
        return (
          item.type &&
          numberType.includes(item.type.toLowerCase()) &&
          item.isShow === 0
        );
      });
    },
    //时间字段
    getEsStatisticsFieldListForDate() {
      this.esStatisticsFieldListForDate = this.esStatisticsFieldList.filter(
        (item) => item.type && dateType.includes(item.type.toLowerCase())
      );
    },
    //条件字段
    getEsIsSearchFieldList(value) {
      let fieldList = this.esStatisticsFieldList.filter(
        (item) => item.isSearch === 0
      );
      if (this.esStatisticsFieldList.length) {
        let filterForm = {
          value: this.chdForm.label,
          key: "label",
        };
        let initData = {
          value: value || this.formChdTemp[this.chdIndex]?.fieldName || "",
          key: "value",
        };
        // if(this.form.chd.length) {
        //   this.form.chd.forEach((item, index) => {
        //     initData.value = item.fieldName
        //     this.initChdFields[index] = initPagination(fieldList, this.chdForm.pageNum, this.chdForm.pageSize, filterForm, initData)
        //   })
        // } else {
        //   // this.chdList = initPagination(fieldList, this.chdForm.pageNum, this.chdForm.pageSize, filterForm, initData)
        // }

        return initPagination(
          fieldList,
          this.chdForm.pageNum,
          this.chdForm.pageSize,
          filterForm,
          initData
        );

        // this.chdList = initPagination(fieldList, this.chdForm.pageNum, this.chdForm.pageSize, filterForm, initData)
      }
    },
    //重置
    resetForm(type) {
      if (type === "ESTableInput") {
        this.form.dataSourceId = "";
        this.resetFormData();
      }
    },
    //置空表单
    resetFormData() {
      this.form.statisticsList = [
        {
          field: "",
          aggType: "terms", //固定参数
          size: 10, //固定参数
          sort: true, //固定参数
          type: "",
        },
      ];
      this.form.dateFieldsList = [
        {
          field: "",
          dateIntervals: "",
          aggType: "datehistogram", // 日期固定类型
          size: 10, //固定参数
        },
      ];
      this.form.targetFieldList = [
        {
          aggType: "count",
          field: "",
          size: 10, //固定参数
        },
      ];
      this.form.chd = [
        {
          fieldName: null,
          operator: null,
          value: null,
          chdType: "define",
        },
      ];
    },
    //统计字段选中事件
    // handleChooseStatistics(val) {
    //
    //   this.form.statisticsList[0].type = val ? this.esStatisticsFieldListForOther.find(f => f.value === val).type : ''
    // },

    handleTargetField() {
      this.form.targetFieldList[0].field = "";
    },
    //
    // handleChange(val, index) {
    //   let data = this.esIsSearchFieldList.find(f => f.value === val)
    //   this.form.chd[index].type = val && data ? data.type : ''
    // },

    //新增条件
    addCondition() {
      this.form.chd.push({
        fieldType: null,
        symbol: null,
        fieldValue: null,
        chdType: "define",
      });
      this.$set(
        this.initChdFields,
        this.initChdFields.length,
        this.getEsIsSearchFieldList()
      );
    },
    //删除条件
    delCondition(index) {
      this.form.chd.splice(index, 1);
    },

    //自定义校验方法
    checkFormBeforeClose() {
      let result = 1;
      this.$refs["componentFrom"].validate((valid) => {
        if (valid) {
          result = "ok";
        }
      });
      return result;
    },

    initData() {
      this.form.name = this.option.name;
      try {
        let { group, indexPrefix, where, limitSize } = JSON.parse(
          this.option.sql
        );
        // console.log(this.option.sql)
        this.form.dataSourceId = this.option.dataSourceId;
        this.form.limitSize = limitSize;
        this.indexPrefix = indexPrefix;
        let isCount = true;
        if (group.length) {
          group.forEach((item) => {
            if (item.aggType === "terms") {
              Reflect.ownKeys(this.form.statisticsList[0]).forEach(
                (k) => (this.form.statisticsList[0][k] = item[k])
              );
              this.initStatistics = this.form.statisticsList[0].field;
            } else if (item.aggType === "datehistogram") {
              Reflect.ownKeys(this.form.dateFieldsList[0]).forEach(
                (k) => (this.form.dateFieldsList[0][k] = item[k])
              );
            } else if (
              item.aggType === "avg" ||
              item.aggType === "max" ||
              item.aggType === "min" ||
              item.aggType === "sum"
            ) {
              isCount = false;
              Reflect.ownKeys(this.form.targetFieldList[0]).forEach(
                (k) => (this.form.targetFieldList[0][k] = item[k])
              );
            }
          });
        }
        //isCount判断是否设置默认指标字段为count
        if (isCount) {
          this.form.targetFieldList[0].aggType = "count";
        }

        if (where.chd.length) {
          this.form.chd = where.chd;
          this.formChdTemp = _deepClone(where.chd);
        }
        this.getEsFieldList(this.form.dataSourceId);
      } catch (e) {
        // console.error('JSON转换异常: ', e)
      }
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.demo-drawer__content {
  padding: 0 16px 16px 16px;
  overflow-y: scroll;

  .esField {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 55px);
  }

  .el-form {
    .form-item-flex {
      display: flex;
      justify-content: space-between;

      .el-select {
        width: 49%;
      }
    }

    ::v-deep
      .el-form-item.is-required:not(.is-no-asterisk)
      > .el-form-item__label:before {
      content: "";
    }
  }
}

::v-deep .el-select-dropdown {
  width: 220px;

  .selectList {
    height: 34px;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;

    .carousel-text-warp {
      width: 100%;
    }
  }
}
</style>
